<template>
  <div class="login-main">
    <div @click="comeBack('/')" class="login-header">
      <van-icon name="arrow-left" />
<!--      <img  src="@/assets/image/lang.png" alt="">-->
    </div>
<!--    登录-->
    <div class="title">{{ $t('h.A001') }}</div>
    <div class="login-method">
<!--      <div class="box">手机号</div>-->
<!--      <div class="box active">邮箱</div>-->
    </div>
    <div class="form">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
<!--        邮箱-->
        <el-form-item :label="$t('h.A002')" prop="account">
<!--          请输入邮箱-->
          <el-input v-model="ruleForm.account" :placeholder="$t('h.A003')"></el-input>
        </el-form-item>
<!--        密码-->
        <el-form-item style="margin-top: -10px" :label="$t('h.A004')" prop="password">
<!--          请输入密码-->
          <el-input v-model="ruleForm.password" show-password :placeholder="$t('h.A005')"></el-input>
        </el-form-item>
        <el-form-item >
<!--          登录-->
            <div @click="submitForm('ruleForm')"  class="submit">{{ $t('h.A001') }}</div>
<!--          <van-button @click="submitForm('ruleForm')" color="#002FFF" block type="primary">登录</van-button>-->
        </el-form-item>
      </el-form>
    </div>
    <div class="form-tips">
<!--      还没账号-->
      {{$t('h.A006')}}<a @click="goRegister" href="javascript:void (0)">
<!--      去注册-->
      {{$t('h.A008')}}
    </a>
    </div>
  </div>
</template>

<script>
import {Toast} from "vant";
import {getItem} from "@/plugins";
import {Notify} from "vant";
export default {
  data() {
    return {
      ruleForm: {account: '', password: ''},
      rules:{
        account: [{ required: true, message:this.$t('h.A003'), trigger: 'blur' }],
        password: [{ required: true, message: this.$t('h.A005'), trigger: 'blur' }],
      }
    }
  },
  mounted(){
    if(this.$route.query?.n){
      setTimeout(()=>{
        Notify({type: 'danger', message: this.$t('h.A007')});
      },500)
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          Toast.loading({forbidClick: true});
          this.$store.dispatch('loginSetToken',this.ruleForm).then(res=>{
            // this.$router.push('/')
            if (getItem('path')){
              this.$router.push(getItem('path'))
            }else{
              this.$router.push('/')
            }
          }).catch(err=>{
            Toast.fail(err.msg)
          })
        } else {
          return false;
        }
      });
    },
    goRegister(){
      this.$router.push('/register')
    },
    comeBack(item){
      // this.$router.push(item)
      this.$router.go(-1)
    }
  }
}
</script>


<style scoped lang="scss">
.login-main{
  width: 100%;
  padding: 3% 4%;
  box-sizing: border-box;
  .login-header{
    width: 100%;
    height: 40px;
    background: #fff;
    font-size: 24px;
    display: flex;
    justify-content: space-between;

    box-sizing: border-box;
    img{
      height: 22px;
    }
  }
  .title{
    width: 100%;
    margin-top: 10px;
    font-weight: 600;
    font-size: 28px;
  }
  .login-method{
    width: 100%;
    margin-top: 20px;
    display: flex;
    .box{
      padding: 8px 30px;
      background: #eee;
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      color: #333;
      border-radius: 5px;
      margin-right: 15px;
    }
    .active{
      background: #002FFF;
      color: #fff;
    }
  }
  .form{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    .submit{
      width: 100%;
      display: block;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      text-align: center;
      color: #fff;
      background: #002FFF;
      border-radius: 5px;
    }
  }
  .form-tips{
    width: 100%;
    font-size: 14px;
    text-align: center;
    a{
      font-size: 14px;
      color: #4aa8ff;
    }
  }
}

</style>
